<template>
    <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''">
        <img :src="avatarSrc">
    </div>
</template>
<script>
    // import defaultImage from '@/assets/images/avatar.png'

    export default {
        data() {
            return {
                defaultImage
            }
        },
        props: {
            src: String,
            type: {
                type: String,
                default: 'C2C'
            },
            shape: {
                type: String,
                default: 'circle'
            }
        },
        mounted() {
        },
        computed: {
            avatarSrc: function () {
                let src = this.src
                if (/^(https:|http:|\/\/)/.test(src)) {
                    return src
                } else {
                    return this.defaultSrc
                }
            },
            defaultSrc: function () {
                switch (this.type) {
                    case 'C2C':
                        // 个人头像
                        return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
                    case 'GROUP':
                        // 群默认头像
                        return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png'
                    case window.TIM.TYPES.CONV_SYSTEM:
                        return systemAvatar
                    default:
                        // 默认头像
                        return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-1.png'
                }
            }
        }

    }
</script>
<style scoped>
    .avatar {
        background-color: #eee;
        text-align: center;
        width: 60px;
        height: 60%;
        overflow: hidden;
        border-radius: 100%;
    }

    .avatar img {
        border-radius: 100%;
        width: 100%;
        height: 100%
    }

    .avatar .shape-circle {
        border-radius: 100%;
    }


</style>
